<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>user profile</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/default.css">
    <link rel="stylesheet" type="text/css" href="css/normalize.css"/>
    <link rel="stylesheet" type="text/css" href="css/font-awesome.4.6.0.css">
    <link rel="stylesheet" type="text/css" href="css/amazeui.min.css">
    <link rel="stylesheet" type="text/css" href="css/amazeui.cropper.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="dist/css/custom_up_img.css">
    <link rel="stylesheet" type="text/css" href="dist/css/pignose.tab.min.css"/>
    <link rel="stylesheet" type="text/css" href="dist/css/htools.select.skin.css">
    <link rel="stylesheet" type="text/css" href="dist/css/jquery.restable.min.css">

    <link rel="stylesheet" href="dist/css/jquery.jexcel.css" type="text/css"/>
    <link rel="stylesheet" href="dist/css/jquery.jcalendar.css" type="text/css"/>
    <!--<link rel="stylesheet" href="http://cdn.bossanova.uk/css/jquery.jexcel.css" type="text/css" />-->
    <!--<link rel="stylesheet" href="http://cdn.bossanova.uk/css/jquery.jcalendar.css" type="text/css" />-->

    <!--[if IE]>
    <script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
    <![endif]-->
</head>
<body>
    <div class="article">
        <div class="tab">
            <ul>
                <li>
                    <a href="#">Profile</a>
                    <div class="container">
                        <div class="row">
                            <form data-toggle="validator" role="form">
                                <div class="form-group" style="height:80px; line-height:80px;">
                                    <label class="control-label"
                                           style="float: left; vertical-align:middle; width:120px;">Profile
                                        Picture</label>
                                    <div class="form-inline row">
                                        <div class="form-group col-sm-6">
                                            <div class="up-img-cover" id="up-img-touch">
                                                <img class="am-circle" alt="点击图片上传" src="img/hu.jpg"
                                                     data-am-popover="{content: '点击上传', trigger: 'hover focus'}">
                                            </div>
                                            <div><a style="text-align: center; display: block;" id="pic"></a></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="clear"></div>
                                <div class="form-group">
                                    <label for="inputEmail" class="control-label"
                                           style="float: left; vertical-align:middle; width:120px;">Email</label>
                                    <div class="form-inline row">
                                        <div class="form-group col-sm-6">
                                            <input type="email" class="form-control" id="inputEmail"
                                                   placeholder="" disabled>
                                        </div>
                                    </div>
                                </div>
                                <div class="clear"></div>
                                <div class="form-group">
                                    <label for="inputPassword" class="control-label"
                                           style="float: left; vertical-align:middle; width:120px;">Password</label>
                                    <div class="form-inline row">
                                        <div class="form-group col-sm-6">
                                            <a href="#" style="cursor:hand">Change Password</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="clear"></div>
                                <div class="form-group">
                                    <label for="inputRegion" class="control-label"
                                           style="float: left; vertical-align:middle; width:120px;">Region</label>
                                    <div class="form-inline row">
                                        <div class="form-group col-sm-6">
                                            <input type="text" data-toggle="validator" data-minlength="6"
                                                   class="form-control" id="inputRegion" placeholder="eg. shanghai"
                                                   required>
                                        </div>
                                    </div>
                                </div>
                                <div class="clear"></div>
                                <div class="form-group">
                                    <label class="control-label" for="inputDescription"
                                           style="float: left; vertical-align:middle;">Experience</label>
                                    <textarea type="text" class="form-control" id="inputExperience" name="description"
                                              rows="3" cols="20"></textarea>
                                </div>

                                <div class="clear"></div>
                                <div class="form-group" style="text-align: center">
                                    <button type="submit" class="btn btn-primary">Submit</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#">Preference</a>
                    <div class="container">
                        <div class="row">
                            <form data-toggle="validator" role="form">
                                <div class="form-group">
                                    <label class="control-label"
                                           style="float: left; vertical-align:middle; width:180px;">Email
                                        Notification</label>
                                    <div class="form-inline row">
                                        <div class="form-group col-sm-6">
                                            <div class="checkbox">
                                                <label>
                                                    <input type="checkbox" id="terms0">
                                                    Push
                                                </label>
                                            </div>
                                            <div class="checkbox">
                                                <label>
                                                    <input type="checkbox" id="terms1">
                                                    Daily
                                                </label>
                                            </div>
                                            <div class="checkbox">
                                                <label>
                                                    <input type="checkbox" id="terms2">
                                                    Weekly
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="clear"></div>
                                <div class="form-group">
                                    <label for="inputPassword" class="control-label"
                                           style="float: left; vertical-align:middle; width:180px;">Language</label>
                                    <div class="form-inline row">
                                        <div class="form-group col-sm-6">
                                            <label>
                                                <select id="lanselect">
                                                    <option value="1">English</option>
                                                    <option value="2">Chinese</option>
                                                </select>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="clear"></div>
                                <div class="form-group" style="text-align: center">
                                    <button type="submit" class="btn btn-primary">Submit</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#">Payment Record</a>
                    <div class="container">
                        <div class="form-group" style="height:80px; line-height:80px;">
                            <label class="control-label"
                                   style="float: left; vertical-align:middle; width:120px;">Account Status</label>
                            <div class="form-inline row">
                                <div class="form-group col-sm-10">
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox">
                                            Free Account
                                        </label>
                                    </div>
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox">
                                            Standard Account
                                        </label>
                                    </div>
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox">
                                            Professional Account
                                        </label>
                                    </div>
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" checked>
                                            Corporate Account
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="clear"></div>
                        <div class="form-group payment-record-area">
                            <ol class="record-list">
                                <li>Free Trial Account: Free account have a total of 1 project and 2 meeting minutes
                                </li>
                                <li>Standard Account: 5 projects and 10 meeting minutes, valid for one year, CNY500
                                    CNY200 2projects and 4 meeting minutes, valid for one year.
                                </li>
                                <li>Professional Account: CNY200/Month, Enable guest account for project view</li>
                                <li>Corporate Account: CNY200/User/Month or CNY1000/Project/Month Contact
                                    Sales@GDoxa.com for more detail
                                </li>
                            </ol>
                        </div>

                        <div class="clear"></div>
                        <table id="table1">
                            <thead>
                            <tr>
                                <th>CNY1000/Project/Month</th>
                                <th>Standard Account</th>
                                <th>Professional Account</th>
                                <th>Corporate Account(Per User)</th>
                                <th>Corporate Account(Per Project)</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>1 project</td>
                                <td>5 projects</td>
                                <td>Unlimited</td>
                                <td>Unlimited</td>
                                <td>1 project</td>
                            </tr>
                            <tr>
                                <td>1 meeting minutes</td>
                                <td>10 meeting minutes</td>
                                <td>Unlimited</td>
                                <td>Unlimited</td>
                                <td>Unlimited</td>
                            </tr>
                            <tr>
                                <td>3 months</td>
                                <td>12 months</td>
                                <td>Unlimited</td>
                                <td>Unlimited</td>
                                <td>Unlimited</td>
                            </tr>
                            <tr>
                                <td>No Guest Account</td>
                                <td>No Guest Account</td>
                                <td>Unlimited</td>
                                <td>Unlimited</td>
                                <td>Unlimited</td>
                            </tr>
                            <tr>
                                <td>1 user</td>
                                <td>1 user</td>
                                <td>1 user</td>
                                <td>1 user</td>
                                <td>Unlimited</td>
                            </tr>
                            <tr>
                                <td>Free</td>
                                <td>CNY500</td>
                                <td>CNY200/Month</td>
                                <td>CNY200/Month</td>
                                <td>CNY1000/Project</td>
                            </tr>
                            </tbody>
                        </table>

                        <div class="clear"></div>
                        <div class="form-group">
                            <div id="my" style="float: left;"></div>
                        </div>

                        <div class="clear"></div>
                        <div class="form-group" style="text-align: center; margin-top: 10px;">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#">Contact us</a>
                    <div class="container">
                        <div class="row">
                            <div class="form-group">
                                <label class="control-label" for="inputDescription"
                                       style="float: left; vertical-align:middle; width:240px;">Context Us:
                                    info@gdoxa.com <br/> Feedback or Comment
                                </label>
                                <div class="form-inline row">
                                    <div class="form-group">
                                            <textarea class="form-control" id="inputContact"
                                                      name="description" rows="6" cols="100"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="clear"></div>
                            <div class="form-group" style="text-align: center">
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#">Company Profile</a>
                    <div>
                        TBD.
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <!--图片上传框-->
    <div class="am-modal am-modal-no-btn up-frame-bj " tabindex="-1" id="doc-modal-1">
        <div class="am-modal-dialog up-frame-parent up-frame-radius">
            <div class="am-modal-hd up-frame-header">
                <label>修改头像</label>
                <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
            </div>
            <div class="am-modal-bd  up-frame-body">
                <div class="am-g am-fl">
                    <div class="am-form-group am-form-file">
                        <div class="am-fl">
                            <button type="button" class="am-btn am-btn-default am-btn-sm">
                                <i class="am-icon-cloud-upload"></i> 选择要上传的图片
                            </button>
                        </div>
                        <input type="file" id="inputImage">
                    </div>
                </div>
                <div class="am-g am-fl">
                    <div class="up-pre-before up-frame-radius">
                        <img alt="" src="" id="image">
                    </div>
                    <div class="up-pre-after up-frame-radius">
                    </div>
                </div>
                <div class="am-g am-fl">
                    <div class="up-control-btns">
                        <span class="am-icon-rotate-left" onclick="rotateimgleft()"></span>
                        <span class="am-icon-rotate-right" onclick="rotateimgright()"></span>
                        <span class="am-icon-check" id="up-btn-ok" url="#"></span>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <!--加载框-->
    <div class="am-modal am-modal-loading am-modal-no-btn" tabindex="-1" id="my-modal-loading">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">正在上传...</div>
            <div class="am-modal-bd">
                <span class="am-icon-spinner am-icon-spin"></span>
            </div>
        </div>
    </div>

    <!--警告框-->
    <div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">信息</div>
            <div class="am-modal-bd" id="alert_content">
                成功了
            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn">确定</span>
            </div>
        </div>
    </div>

<script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
<script type="text/javascript" src="dist/js/jquery.jexcel.js"></script>
<script type="text/javascript" src="dist/js/jquery.jcalendar.js"></script>

<script type="text/javascript" src="dist/js/validator.js"></script>
<script type="text/javascript" src="js/amazeui.min.js" charset="utf-8"></script>
<script type="text/javascript" src="js/cropper.min.js" charset="utf-8"></script>
<script type="text/javascript" src="dist/js/custom_up_img.js" charset="utf-8"></script>
<script type="text/javascript" src="dist/js/pignose.tab.min.js"></script>
<script type="text/javascript" src="dist/js/jquery.htools.select.js"></script>
<script type="text/javascript" src="dist/js/jquery.restable.min.js"></script>

<!--<script src="http://cdn.bossanova.uk/js/jquery.jexcel.js"></script>-->
<!--<script src="http://cdn.bossanova.uk/js/jquery.jcalendar.js"></script>-->
<script type="text/javascript">
    data = [
        ['100001', '2016-01-01', 300, 'XXXX', 'ordered'],
        ['100011', '2017-04-01', 200, 'XXaaXX', 'ordered'],
        ['100023', '2017-05-01', 400, 'XXX22X', 'ordered'],
        ['100041', '2017-06-01', 500, 'XXXddX', 'ordered']
    ];

    $('#my').jexcel({
        data: data,
        colHeaders: ['Invoice No', 'Payment Date', 'Amount', 'Payment Method', 'Status'],
        colWidths: [180, 180, 180, 180, 180],
        columns: [
            {type: 'text'},
            {type: 'calendar', options: {format: 'YYYY/MM/DD'}},
            {type: 'numeric'},
            {type: 'text'},
            {type: 'text'}
        ]
    });

    $(function () {
        $('.tab').pignoseTab({
            animation: true,
            children: '.tab'
        });

        var $lanselect = $("#lanselect");

        /**
         * 初始化插件
         */
        $lanselect.goSelectInput({
            height: 30,
            width: 250
        });
    });

</script>
</body>
</html>